<template>
    <a-card :bordered="false">
        <div id="personDetail" ref="personDetail" :style="{ height: screenHeight, width: '100%' }"></div>
    </a-card>
</template>

<script>
import 'echarts/map/js/china'
import 'echarts/map/js/province/hebei.js'
const echarts = require('echarts')
export default {
    name: 'Ce',
    data() {
        // 定义数据项
        return {
            data_list: [
                { name: '江苏', value: 6 },
                { name: '西藏', value: 8 },
                { name: '安徽', value: 118491 },
                { name: '湖北', value: 117036 },
                { name: '湖南', value: 110666 },
                { name: '广东', value: 109915 },
                { name: '浙江', value: 69540 },
                { name: '福建', value: 45146 },
                { name: '山东', value: 42753 },
                { name: '河南', value: 31141 },
                { name: '四川', value: 30287 },
                { name: '河北', value: 29890 },
                { name: '江西', value: 23649 },
                { name: '黑龙江', value: 20475 },
                { name: '陕西', value: 17942 },
                { name: '贵州', value: 16019 },
                { name: '吉林', value: 15441 },
                { name: '广西', value: 11875 },
                { name: '山西', value: 11077 },
                { name: '云南', value: 9238 },
                { name: '辽宁', value: 6538 },
                { name: '甘肃', value: 6128 },
                { name: '重庆', value: 5883 },
                { name: '内蒙古', value: 5 },
                { name: '海南', value: 4596 },
                { name: '天津', value: 4244 },
                { name: '新疆', value: 4125 },
                { name: '上海', value: 3429 },
                { name: '宁夏', value: 3225 },
                { name: '青海', value: 1833 },
                { name: '北京', value: 1765 }
            ],

            screenHeight: document.documentElement.clientHeight * 0.6, // 屏幕高度
            myChinaMap: {},
            card: {
                name: ''
            },
            CardShow: false,
            value1: ''
            // screenHeight:'600px', // 屏幕高度
        }
    },
    mounted() {
        this.chinaMaprsult()
    },
    methods: {
        chinaMaprsult(name) {
            let myChart = this.$echarts.init(this.$refs.personDetail)
            const labelOption = {
                show: true,
                //   rotate: 90,
                formatter: '{c}  {b}',
                fontSize: 16,
                color: '#fff',
                rich: {
                    name: {}
                }
            }
            var geo = {
                // map: name ? name : 'china', // 核心
                roam: false,
                label: {
                    // 页面初始化加载的文字
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#ccc', // 页面初始化的地图文字颜色
                            fontSize: 12 // // 页面初始化的地图文字大小
                        }
                    }
                }
            }
            var series = [
                {
                    name: '数据',
                    type: 'map',
                    map: 'hebei',
                    roam: true,
                    label: labelOption,
                    itemStyle: {
                        normal: {
                            areaColor: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#073684' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#061E3D' // 100% 处的颜色
                                    }
                                ]
                            },
                            // 板块边框颜色
                            borderColor: 'rgba(0, 0, 0)'
                        },
                        emphasis: {
                            // 鼠标悬浮在板块上的颜色
                            areaColor: 'rgba(43, 145, 183)'
                        }
                    },
                    data: this.data_list
                }
            ]

            let option = {
                // 鼠标悬浮出现黑框
                tooltip: {
                    trigger: 'item',
                    formatter: '省份：{b}<br/>客户：{c}'
                },
                // geo: geo,
                legend: {
                    orient: 'vertical',
                    top: 'bottom',
                    left: 'right',
                    // data: ['西安 Top3', '西宁 Top3', '银川 Top3'],
                    data: ['唐山'],
                    textStyle: {
                        color: '#fff'
                    },
                    selectedMode: 'multiple'
                },
                series: series
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            // 点击事件返回省名
            const _this = this
            this.$nextTick(() => {
                _this.myChinaMap = echarts.init(this.$refs.personDetail)

                _this.myChinaMap.on('click', function (param) {
                    _this.CardShow = true

                    _this.card.name = param.name
                })
            })
        },
        changeTime(e) { },
        // 中国地图点击省份 显示当前省份的详细的地区。
        chinaMapHidden(chinaMap) {
            let that = this
            chinaMap.off('click') //这里解决多次触发点击事件 但是还会执行2次  引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空
            chinaMap.on('click', async function (params) {
                if (params.name in that.provinces) {
                    let s = await import(`echarts/map/js/province/${that.provinces[params.name]}.js`)
                    if (s) {
                        that.chinaMaprsult(params.name)
                    }
                }
            })
        }
    }
}
</script>
<style scoped lang="less">
html,
body {
    width: 100%;
    height: 100%;
}

#personDetail {
    height: 100%;
    min-height: 700px;
    width: 100%;
    // background: url(@/assets/map_bg.jpg) no-repeat center;
}

// 卡片
.box-card {
    width: 200px;
    height: 400px;
    // background-color: green;
    position: absolute;
    top: 200px;
    z-index: 999;
    // color: #fff;
}
</style>